<template>
  <view class="flex">
    <view
      class="flex flex-sub"
      @click="goData(content, index, 'disk')"
      @touchstart="onTouchStart"
      @touchend="onTouchEnd"
    >
      <view class="icon-img-content">
        <tm-icon
          v-if="content.share.avatar && content.share.avatar?.thumbnail"
          :font-size="60"
          :name="content.share.avatar.thumbnail"
          class="icon-img"
        ></tm-icon>
        <loadFileIcon
          v-else
          :icon-type="content.share.typeName || content.typeName || '其他'"
          class="icon-img"
        />
      </view>
      <view class="m-l-15 flex-list">
        <view class="flex title-flex">
          <view class="wd150">
            <tm-text
              _class="text-overflow-1 text-weight-b m-b-3"
              :font-size="32"
              :label="content.name"
            ></tm-text>
          </view>
          <!-- <tm-tag
            v-if="!showRight"
            :shadow="0"
            :margin="[10, 10]"
            font-color="#0052D9"
            color="#F2F3FF"
            size="xs"
            :label="content.groupTags.length>0?(content.groupTags.at(-1) ===content.belong.name?content.groupTags.at(-2) :content.groupTags.at(-1)):content.groupTags[0]"
            v-show="content.groupTags[0]"
          ></tm-tag> -->
          <tm-tag
            v-for="(tag, tagIndex) in content.groupTags"
            :key="tagIndex"
            :shadow="0"
            :margin="[10, 10]"
            font-color="#0052D9"
            color="#F2F3FF"
            size="xs"
            :label="tag.length > (content.name.length>6?2:3) ? tag.slice(0, (content.name.length>6?2:3)) + '...' : tag"
            v-show="tag"
          ></tm-tag>
        </view>
        <tm-text
          :font-size="24"
          color="grey"
          _class="text-overflow-1"
          :label="content.metadata.remark"
          v-show="content.metadata.remark"
        ></tm-text>
      </view>
      <view
        v-if="selectMode"
        class="select-circle"
        :class="{
          selected: selectedIndexes && selectedIndexes.includes(index)
        }"
      ></view>
    </view>

    <view class="rg-time" v-if="showRight">
      <tm-icon
        :font-size="60"
        color="#fff"
        name="../../../static/institution.png"
        @touchstart.stop.prevent="goData(content, 0, 'colony')"
      ></tm-icon>
    </view>
  </view>
</template>
<script lang="ts" setup>
import { IFile } from '@/ts/core'
import loadFileIcon from '@/components/icon/loadFileIcon.vue'
import { watch, ref } from 'vue'
type Props = {
  content: any
  isShowRight: boolean
  isSelectMode: boolean
  index: number
  selectedIndexes?: number[]
  enableTouch: boolean
}
const props = defineProps<Props>()
const showRight = ref(false)
const selectMode = ref(false)
const isTouch = ref(false)
const emit = defineEmits(['btnClick', 'touchEnd'])
watch(
  () => props.isShowRight,
  newVal => {
    showRight.value = newVal // 根据外部传入的值来设置是否展示右边
  },
  { immediate: true }
)
watch(
  () => props.isSelectMode,
  newVal => {
    selectMode.value = newVal // 根据外部传入的值来设置选择模式
  },
  { immediate: true }
)
watch(
  () => props.enableTouch,
  newVal => {
    isTouch.value = newVal // 根据外部传入的值来设置选择模式
  },
  { immediate: true }
)
let touchStartTime: number | null = null
const LONG_PRESS_TIME = 500 // 长按时间阈值（ms）
const debounce = (func: any, delay: number) => {
  let timeout: any
  return function (...args: any) {
    clearTimeout(timeout)
    timeout = setTimeout(() => func(...args), delay) // 直接使用 args 传递参数
  }
}
const goData = debounce((item: IFile, index: number, type: string) => {
  //更新点击数据
  emit('btnClick', item, index, type)
}, 300)
const onTouchStart = () => {
  touchStartTime = Date.now()
}
const onTouchEnd = () => {
  if (!isTouch.value) return
  if (touchStartTime && Date.now() - touchStartTime > LONG_PRESS_TIME) {
    emit('touchEnd')
  }
}
</script>

<style lang="scss">
@import '../../common/style/global.scss';
.icon-img-content {
  display: flex;
  justify-content: center;
  align-items: center;
  .icon-img {
    width: 60rpx;
    height: 60rpx;
    border-radius: 4rpx;
    image {
      width: 100%;
      height: 100%;
    }
  }
}

.flex-list {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1;
}
.title-flex {
  align-items: center;
}
.rg-time {
  display: flex;
  align-items: center;
}
.flex-sub {
  flex: 1;
}
.wd150 {
  max-width: 380rpx;
}
/* 新增选择样式 */
.select-circle {
  position: absolute;
  top: 50%;
  right: 50rpx;
  width: 30rpx;
  height: 30rpx;
  border-radius: 50%;
  border: 2rpx solid #ccc; /* 圆环外圈颜色 */
  background-color: transparent;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.select-circle.selected {
  background-color: white; /* 选中状态的背景色 */
}

.select-circle.selected::after {
  content: '';
  width: 20rpx;
  height: 20rpx;
  border-radius: 50%;
  background-color: #0052d9; /* 实心圆的颜色 */
}
</style>
